<template>
    <div :class="('ys-load-component' + (loadingFlag ? ' loadingFlag-active' : ''))">
        <transition-group name="loading-trans" :appear="true">
            <slot v-if="loadingFlag" :loadingFlag="loadingFlag"></slot>
            <slot name="loadingZS" v-if="!loadingFlag"></slot>
            <el-skeleton style="width:100%;height:100%;" :loading="true" animated
                v-if="!$slots.loadingZS && !loadingFlag">
                <template #template>
                    <el-skeleton-item variant="image" style="width:100%; height:100%" />
                </template>
            </el-skeleton>
        </transition-group>
    </div>
</template>
<script>
import { h } from 'vue';
export default {
    name: 'LoadingComponent',
    data() {
        return {
            loadingFlag: false,
        }
    },
    created() {
        var app = this.$.appContext.app;
        var rd = app.example.example.pushExample(this);
        // console.log(rd.getState())
        // this.$slots.templace = () => h('li', { children: [this.$.slots.default(), this.$.slots.loadingZS()] })
        if (rd) {
            this.rd = rd;
        }
    },
    props: {
        options: {
            type: Object,
            default: {},
        },
    },
    unmounted() {
        var app = this.$.appContext.app;
        var { remove } = app.example.example.getState(this);
        var { rd: { example } } = this;
        remove(example)
    },
    watch: {
        loadingFlag: {
            handler() {
                
            },
        }
    },
    mounted(){
        this.$.appContext.app.example.example.implementHandler?.();
    }
}
</script>
<style>
.loading-trans-enter-from {
    opacity: 0.3;
}

.loading-trans-enter-to {
    opacity: 1;
}

.loading-trans-enter-active {
    transition: opacity 550ms ease-in-out;
}

div.ys-load-component {
    transition: all 700ms ease-in-out;
    opacity: .3;
}

div.loadingFlag-active {
    opacity: 1;
}
</style>